<template>
	<view>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" :indicator-dots="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
						<view class="info">
							<view class="">{{ swiper.title }}</view>
							<view class="cont">{{ swiper.cont }}</view>
						</view>
						<view class="bannerLive">
							看直播
							<view class="iconzb icon-bofang"></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="category-list">
			<view class="category" v-for="(row, index) in categoryList" :key="index" @tap="toCategory(row)">
				<view class="img"><image :src="row.img"></image></view>
				<view class="text">{{ row.name }}</view>
			</view>
		</view>
		<!-- 直播滑动 -->
		<view class="seckill-section">
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in newGoodsList" :key="index" class="floor-item" @click="navToDetailPage(item)">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="liveHot">
							<view class="iconBox">
								<view v-if="item.start == 'after'" class="iconzb icon-bofang"></view>
								<view v-if="item.start == 'now'" class="iconzb icon-yinliang"></view>
							</view>
							<text v-if="item.start == 'after'">{{ item.time }}开始</text>
							<text v-if="item.start == 'now'">{{ item.mood }}人气</text>
							
						</view>
						<view class="clamp">
							<view class="title">{{ item.title }}</view>
							<view class="tag">{{ item.tag }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="product in productList" :key="product.goods_id" @tap="toGoods(product)">
					<view class="imgBox">
						<image mode="scaleToFill" :src="product.img"></image>
						<view class="liveHot">
							
							<view class="iconBox">
								直播中
								<!-- <view  class="iconzb icon-bofang"></view> -->
								<view class="iconzb icon-yinliang"></view>
							</view>
							{{ 234234 }}人气
						</view>
					</view>
					<view class="plank">
						
					<view class="name">{{ product.name }}</view>
					<view class="shopBox">
						<image :src="product.shopImg" mode="widthFix"></image>
						<view class="info">
						<view class="shopName">{{ product.shopName }}</view>
						<view class="shopType">{{ product.shopType }}</view>
						</view>
					</view>
					<view v-if="product.products" class="products">
						<view class="img-item" v-for="(item,index) in product.products" :key="index" >
							
						<image  :src="item.img" mode="widthFix">
							<view v-if="index==2" class="treasure">
								{{product.productNum}}
								<view class="">
									宝贝
								</view>
							</view>
						</view>
							
						</image>
					</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{ loadingText }}</view>
		</view>
	</view>
</template>

<script>
var ttt = 0;
export default {
	data() {
		return {
			currentSwiper: 0,
			// 轮播图片
			swiperList: [
				{ id: 1, src: 'url1', img: '/static/img/goodsInfo/lunbo01.jpeg', title: '360全方位净化器', cont: '有效去除病毒甲醛' },
				{ id: 2, src: 'url2', img: '/static/img/goodsInfo/lunbo02.jpeg', title: '席梦思真皮沙发', cont: '高端家具量身打造' },
				{ id: 3, src: 'url3', img: '/static/img/goodsInfo/lunbo03.jpeg', title: '360运动蓝牙耳机', cont: '智能降噪轻松一刻' }
			],
			// 分类菜单
			categoryList: [
				{ id: 1, name: '惊喜预告', img: '/static/img/category/01.png' },
				{ id: 2, name: '中古二手', img: '/static/img/category/02.png' },
				{ id: 3, name: '大牌穿搭', img: '/static/img/category/03.png' },
				{ id: 4, name: '回放捡漏', img: '/static/img/category/04.png' }
			],
			// 每日上新
			newGoodsList: [
				{
					tag: '大牌秒杀',
					mood: '222',
					start: 'now',
					image: '/static/img/goods/p1.jpg',
					title: '古黛妃 短袖t恤女夏装2019新款韩版宽松',
					price: 179,
					sales: 61
				},
				{
					tag: 'LV迪奥大捡漏',
					mood: '3222',
					start: 'after',
					time:'17:00',
					image: '/static/img/goods/p2.jpg',
					title: '潘歌针织连衣裙',
					price: 78,
					sales: 16
				},
				{
					tag: '北京限购',
					mood: '23222',
					start: 'now',
					image: '/static/img/goods/p3.jpg',
					title: '潘歌针织连衣裙',
					price: 78,
					sales: 16
				},
				{
					tag: 'LV迪奥大捡漏',
					mood: '23222',
					start: 'after',
					time:'21:00',
					image: '/static/img/goods/p4.jpg',
					title: '巧谷2019春夏季新品新款女装',
					price: 108.8,
					sales: 5
				},
				{
					tag: 'LV迪奥大捡漏',
					mood: '23222',
					start: 'now',
					image: '/static/img/goods/p5.jpg',
					title: '巧谷2019春夏季新品新款女装',
					price: 108.8,
					sales: 5
				}
			],
			//猜你喜欢列表
			productList: [
				{
					goods_id: 0,
					img: '/static/img/goods/p1.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					shopImg: '/static/img/category/02.png',
					shopName: '纪梵希官方旗舰店',
					shopType: '官方主播',
					productNum:'32',
					products:[
						{img:'/static/img/goodsInfo/banner01.jpg'},
						{img:'/static/img/goodsInfo/banner02.jpg'},
						{img:'/static/img/goodsInfo/banner03.jpg'},
					]
				},
				{
					goods_id: 0,
					img: '/static/img/goods/p3.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					shopImg: '/static/img/category/03.png',
					shopName: '涛涛服装旗舰店',
					shopType: '个人主播',
					productNum:'32',
					products:[
						{img:'/static/img/goodsInfo/banner02.jpg'},
						{img:'/static/img/goodsInfo/banner03.jpg'},
					]
				},
				{
					goods_id: 0,
					img: '/static/img/goods/p3.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					shopImg: '/static/img/category/03.png',
					shopName: '迪奥官方旗舰店',
					shopType: '官方主播',
					productNum:'100',
				},
				
			],
			loadingText: '正在加载...'
		};
	},

	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom() {
		uni.showToast({ title: '触发上拉加载' });
		let len = this.productList.length;
		if (len >= 40) {
			this.loadingText = '到底了';
			return false;
		}
		// 演示,随机加入商品,生成环境请替换为ajax请求
		let end_goods_id = this.productList[len - 1].goods_id;
		for (let i = 1; i <= 10; i++) {
			let goods_id = end_goods_id + i;
			let p = {
				goods_id: goods_id,
				img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
				name: '商品名称商品名称商品名称商品名称商品名称',
					shopImg: '/static/img/category/03.png',
					shopName: '迪奥官方旗舰店',
					shopType: '官方主播',
					productNum:'100',
					products:[
						{img:'/static/img/goodsInfo/banner01.jpg'},
						{img:'/static/img/goodsInfo/banner02.jpg'},
						{img:'/static/img/goodsInfo/banner03.jpg'},
					]
			};
			this.productList.push(p);
		}
	},
	onLoad() {},
	onReady() {},
	methods: {
		//轮播图跳转
		toSwiper(e) {
			uni.showToast({ title: e.src, icon: 'none' });
		},
		//分类跳转
		toCategory(e) {
			//uni.showToast({title: e.name,icon:"none"});
			uni.setStorageSync('catName', e.name);
			uni.navigateTo({
				url: '/pages/goods/goods-list/goods-list?cid=' + e.id + '&name=' + e.name
			});
		},
		//商品跳转
		toGoods(e) {
			uni.showToast({ title: '商品' + e.goods_id, icon: 'none' });
			uni.navigateTo({
				url: '../../goods/goods'
			});
		},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.title;
			uni.navigateTo({
				url: `/pages/live/liveRoom`
			});
		}
	}
};
</script>
<style lang="scss">
page {
	position: relative;
	background-color: #fff;
}
.swiper {
	width: 100%;
	display: flex;
	justify-content: center;
	.swiper-box {
		width: 100%;
		height: 50vw;
		// //兼容ios，微信小程序
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 50vw;
			swiper-item {
				width: 100%;
				height: 100%;
				padding: 0 28upx;
				box-sizing: border-box;
				overflow: hidden;
				image {
					width: 100%;
					height: 50vw;
					border-radius: 10upx;
					z-index: -1;
				}
				.info {
					color: #fff;
					font-weight: bold;
					margin-top: -150upx;
					margin-left: 20upx;
					// text-align: center;
					.cont {
						font-size: 28upx;
						color: #e6e4e7;
					}
				}
				.bannerLive {
					padding: 5upx 20upx;
					position: absolute;
					bottom: 40upx;
					right: 60upx;
					border-radius: 30upx;
					font-size: 28upx;
					display: flex;
					align-items: center;
					background-color: #fead54;
					background: linear-gradient(to right, #fead54, #ff9000);
					color: #fff;
					text {
						color: #fff;
						margin-left: 10upx;
					}
				}
			}
		}
	}
}

.category-list {
	width: 92%;
	margin: 0 4%;
	padding: 0 0 30upx 0;
	border-bottom: solid 2upx #f6f6f6;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.category {
		width: 25%;
		flex: 1;
		margin-top: 50upx;
		display: flex;
		flex-wrap: wrap;
		.img {
			width: 100%;
			display: flex;
			justify-content: center;
			image {
				width: 9vw;
				height: 9vw;
			}
		}
		.text {
			margin-top: 16upx;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 24upx;
			color: #3c3c3c;
		}
	}
}

/* 秒杀专区 */
.seckill-section {
	padding: 4upx 30upx 4upx;
	background: #fff;
	.s-header {
		display: flex;
		align-items: center;
		height: 92upx;
		line-height: 1;

		.sort {
			min-width: 100upx;
			font-size: 34upx;
			font-weight: bold;
		}
		.more {
			font-size: 24upx;
			color: #666;
			margin-left: auto;
			display: flex;
		}

		.tip {
			font-size: 24upx;
			color: 000;
			margin: 0 20upx 0 40upx;
		}
	}
	.floor-list {
		white-space: nowrap;
	}
	.scoll-wrapper {
		display: flex;
		align-items: flex-start;
	}
	.floor-item {
		position: relative;
		width: 250upx;
		margin-right: 20upx;
		font-size: 28upx;
		color: #000000;
		line-height: 1.8;
		image {
			width: 250upx;
			height: 300upx;
			border-radius: 6upx;
		}
		.liveHot {
			position: absolute;
			top: 5upx;
			left: 5upx;
			font-size: 24upx;
			color: #fff;
			display: flex;
			align-items: center;
			background: rgba($color: #000, $alpha: 0.5);
			padding-right: 10upx;
			border-radius: 30upx;
			.iconBox {
				width: 40upx;
				height: 40upx;
				line-height: 40upx;
				margin-right: 5upx;
				background-color: #ff8e00;
				border-radius: 50%;
			}
			.iconzb {
				width: 40upx;
				height: 40upx;
				text-align: center;
				font-size: 32upx;
				&.icon-bofang {
					color: #fff;
					font-size: 44upx;
					margin-left: -2upx;
				}
				&.icon-yinliang {
					color: #fff;
				}
			}
		}
		.clamp {
			overflow: hidden;
			position: absolute;
			left: 10upx;
			right: 10upx;
			bottom: 20upx;
			color: #fff;
			font-size: 24upx;
			.title {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				white-space: initial;
				line-height: 1.3;
				font-size: 26upx;
			}
			.tag {
				display: inline-block;
				background-color: #ed0013;
				padding: 2upx 5upx;
				border-radius: 10upx;
				line-height: 1.3;
			}
		}
	}
}
.goods-list {
	// background-color: #f4f4f4;
	margin-top: 20upx;

	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
	.product-list {
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 100%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 15upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			overflow: hidden;
			display: flex;
			
			.imgBox {
				position: relative;
				image {
					display: block;
					width: 320upx;
					height: 400upx;
				}
				.liveHot {
					position: absolute;
					left: 10upx;
					bottom: 10upx;
					font-size: 24upx;
					color: #fff;
					display: flex;
					align-items: center;
					background: rgba($color: #000, $alpha: 0.5);
					padding-right: 10upx;
					border-radius: 30upx;
					.iconBox {
						width: 120upx;
						height: 40upx;
						line-height: 40upx;
						margin-right: 5upx;
						background-color: #ff8e00;
						border-radius: 20upx;
						display: flex;
						justify-content: center;
					}
					.iconzb {
						width: 40upx;
						height: 40upx;
						font-size: 32upx;
						&.icon-bofang {
							color: #fff;
							font-size: 44upx;
							margin-left: -2upx;
						}
						&.icon-yinliang {
							color: #fff;
						}
					}
				}
				
			}
				.plank {
					display: flex;
					flex-direction: column;
					padding: 0 20upx;
			.name {
				padding: 10upx 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
				height: 72upx;
			}
			.shopBox {
				margin-top: auto;
				margin-bottom: 10upx;
				display: flex;
				image {
					width: 80upx;
					margin-right: 10upx;
				}
				.info {
					overflow: hidden;
				.shopName {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 30upx;
					font-weight: 600;
				}
				.shopType {
					color: #fda62b;
					font-size: 24upx;
				}
				}
			}
			.products {
				display: flex;
				margin: 10upx 0;
				.img-item {
					width: 80upx;
					height: 80upx;
					border-radius: 10upx;
					margin-right: 20upx;
					overflow: hidden;
				image {
					width: 100%;
				}
				&:last-child {
					position: relative;
				}
				.treasure {
					position: absolute;
					width: 80upx;
					height: 80upx;
					background: rgba(#000,.6);
					top: 0;
					z-index: 2;
					color: #fff;
					text-align: center;
					font-size: 28upx;
					padding-top: 10upx;
					line-height: 1.2;
					view {
						font-size: 24upx;
					}
				}
				}
			}
		}
		}
	}
}
</style>
